<template>
  <div>
    <h1>Badges（徽章）</h1>
    <p>
      v-徽章
      组件上覆或订阅一个像头像的图标或内容上的文本来突出显示用户的信息或只是提请注意某个特定元素。
      徽章中的内容通常包含数字或图标。
    </p>
    <ul>
      <li
        class="font-weight-black"
        v-for="(item, index) in attritems"
        v-bind:key="index"
      >
        {{ item.name }} : {{ item.desc }} ;
      </li>
    </ul>
    <br />
    <br />
    <h2>示例</h2>
    <v-container>
      <v-row align="center" justify="center">
        <v-badge bordered color="error" icon="mdi-lock" overlap>
          <v-btn class="white--text" color="error" depressed>
            Lock Account
          </v-btn>
        </v-badge>

        <div class="mx-3"></div>

        <v-badge
          bordered
          bottom
          color="deep-purple accent-4"
          dot
          offset-x="10"
          offset-y="10"
        >
          <v-avatar size="40">
            <v-img :src="require('../assets/logo.png')"></v-img>
          </v-avatar>
        </v-badge>

        <div class="mx-3"></div>

        <v-badge avatar bordered overlap>
          <template v-slot:badge>
            <v-avatar>
              <v-img :src="require('../assets/logo.png')"></v-img>
            </v-avatar>
          </template>

          <v-avatar size="40">
            <v-img :src="require('../assets/logo.png')"></v-img>
          </v-avatar>
        </v-badge>
      </v-row>
    </v-container>

    <br />
    <br />
    <v-container>
      <v-row justify="space-around">
        <div>
          <v-btn class="mx-1" color="primary" @click="messages++">
            Send Message
          </v-btn>

          <v-btn class="mx-1" color="error" @click="messages = 0">
            Clear Notifications
          </v-btn>
        </div>

        <v-badge :content="messages" :value="messages" color="green" overlap>
          <v-icon large> mdi-vuetify </v-icon>
        </v-badge>
      </v-row>
    </v-container>
    <br />
    <br />
    <v-toolbar>
      <v-tabs dark background-color="primary" grow>
        <v-tab>
          <v-badge color="pink" dot> Item One </v-badge>
        </v-tab>

        <v-tab>
          <v-badge color="green" content="6"> Item Two </v-badge>
        </v-tab>

        <v-tab>
          <v-badge color="deep-purple accent-4" icon="mdi-vuetify">
            Item Three
          </v-badge>
        </v-tab>
      </v-tabs>
    </v-toolbar>
  </div>
</template>

<script>
export default {
  data: () => ({
    messages: 0,
    show: false,
    attritems: [
      {
        name: "content",
        desc: "徽章中的内容",
      },
      {
        name: "value",
        desc: "徽章中的内容",
      },
      {
        name: "bodered",
        desc: "带边界",
      },
      {
        name: "inline",
        desc: "同一行显示",
      },
      {
        name: "tile",
        desc: "方形",
      },
      {
        name: "bottom",
        desc: "在底部显示",
      },
      {
        name: "left",
        desc: "在左边显示",
      },
      {
        name: "dot",
        desc: "显示一个点",
      },
      {
        name: "overlap",
        desc: "覆盖一点被标记物",
      },
      {
        name: "icon",
        desc: "图标",
      },
    ],
  }),
};
</script>